<template>
  <div class="designerDrawerView" @scroll="scrollEvent">
    <div class="searchBox">
      <i class="iconfont el-icon-close close" @click="$emit('closeDrawer','designerPopupShow')"></i>
      <div class="search">
        <i class="iconfont el-icon-search"></i>
        <input v-model="keyword" @keyup.enter="getDesigner()" placeholder="搜索设计师"/>
      </div>
    </div>
    <div class="selectBox">
      <el-select v-model="identityData.val" @change="getDesigner()" placeholder="类型">
        <el-option
            v-for="item in identityData.type"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="offerData.val" @change="getDesigner()" placeholder="报价">
        <el-option
            v-for="item in offerData.list"
            :key="item.value"
            :label="item.name"
            :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="styleData.val" @change="getDesigner()" placeholder="风格">
        <el-option
            v-for="item in styleData.list"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="offer_sort.val" @change="getDesigner()" placeholder="价格">
        <el-option
            v-for="item in offer_sort.list"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </div>
    <status-text :status="designerData.status"></status-text>
    <div class="listBox" v-for="(item,idx) in designerData.data" v-if="designerData.data.length>0">
      <div class="row1">
        <div class="logo" v-if="item.avatar">
          <img :src="item.avatar.path" alt="">
        </div>
        <div class="mid">
          <p>{{ item.name }}</p>
          <div class="text">
            <span>从业{{ item.employ_year }}年</span><i></i> <span>方案{{item.case_num}}</span><i></i><span>{{ item.start_offer }}-{{ item.end_offer }}元/㎡</span>
          </div>
          <div class="theme">
            <span v-for="type in item.design_style">{{ type.name }}</span>
          </div>
        </div>
        <button @click="$emit('sendPopupMsg',item,'designer');$emit('close')">发送</button>
      </div>
      <div class="row2">
        <div class="box" v-for="product in item.case_thumb_url">
          <img :src="product.path">
        </div>
      </div>
    </div>
    <status-text :status="4" v-if="designerData.noMore"></status-text>
  </div>
</template>

<script>
import StatusText from "../common/statusText";

export default {
  components: {StatusText},
  data() {
    return {
      identityData: {
        type: [{
          value: null,
          label: '全部'
        }, {
          value: '1',
          label: '个人设计师'
        }, {
          value: '2',
          label: '设计机构'
        },],
        val: ''
      },
      offer_sort: {
        list: [{
          value: null,
          label: '全部'
        }, {
          value: 'asc',
          label: '价格从低到高'
        }, {
          value: 'desc',
          label: '价格从高到低'
        },],
        val: ''
      },
      styleData: {
        list: [],
        val: ''
      },
      offerData: {
        list: [],
        val: ''
      },
      keyword: '',
      designerData: {
        status: 1,
        data: [],
        page: 1,
        pagesize: 10,
        noMore: false
      }
    }
  },
  created() {
    this.getOption()
    this.getDesigner();
  },

  methods: {
    getOption() {
      this.$http.post('api/client/designer/designer/getOptionList').then(res => {
        if (res.code === 1) {
          this.styleData.list = res.data.design_style;
          this.offerData.list = res.data.offer_section;
          this.styleData.list.unshift({name: '全部', id: null})
          this.offerData.list.unshift({name: '全部', value: null})
        } else {
          this.$message(res.msg)
        }
      }).catch(err => {
        this.$message(err.msg ? err.msg : err.toString())
      })
    },
    scrollEvent(e) {
      if (this.designerData.noMore) {
        return false
      }
      let windowHeight = e.target.clientHeight;
      let scrollTop = e.target.scrollTop;
      let scrollHeight = e.target.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight) {
        this.designerData.page++
        this.getDesigner(true);
      }
    },
    getDesigner(paging = false) {
      console.log(paging)
      if (!paging) {
        this.designerData.page = 1;
      }
      this.$http.post('/api/root/KefuDesigner/getList', {
        offer_sort: this.offer_sort.val,
        keyword: this.keyword,
        style: this.styleData.val,
        offer_section: this.offerData.val,
        identity: this.identityData.val,
        page: this.designerData.page,
        pagesize: this.designerData.pagesize,
      }).then(res => {
        if (res.code === 1) {
          if (this.designerData.page * this.designerData.pagesize >= res.data.count) {
            this.designerData.noMore = true;
          }else {
            this.designerData.noMore = false;
          }
          if (paging) {
            res.data.list.map(item => {
              this.designerData.data.push(item);
            })
          } else {
            this.designerData.data = res.data.list
          }
          this.designerData.status = 2;
        } else {
          this.$message(res.msg)
          this.designerData.status = 3;
        }
      }).catch(err => {
        this.designerData.status = 3;
        this.$message(err.msg ? err.msg : err.toString())
      })
    }
  }
}
</script>

<style lang="less">
.designerDrawerView {
  padding: 0 30px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .searchBox {
    width: 522px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .close {
      margin: 0 40px 0 7px;
      font-size: 24px;
      font-weight: 400;
      color: #0A0605;
    }

    .search {
      overflow: hidden;
      width: 446px;
      height: 33px;
      background: #F8F8F8;
      border-radius: 17px;
      display: flex;
      align-items: center;
      color: #939393;

      i {
        font-weight: 400;
        margin: 0 14px;
        font-size: 15px;
      }

      input {
        background: #F8F8F8;
        border: none;
        height: 100%;
        width: 100%;
        outline-style: none;
        font-size: 13px;
      }
    }
  }

  .selectBox {
    width: 522px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-select {
      width: 120px;
    }
  }

  .listBox {
    background: #F8F8F8;
    border-radius: 4px;
    padding: 20px;
    margin-top: 20px;
    width: 522px;

    .row1 {
      display: flex;
      align-items: center;

      .logo {
        width: 59px;
        height: 59px;
        overflow: hidden;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 100%;
        }
      }

      .mid {
        flex: 1;
        margin-left: 12px;

        p {
          font-size: 20px;
          font-weight: 400;
          color: #1A1C20;
        }

        .text {
          margin-top: 10px;
          font-size: 15px;
          color: #939393;
          font-weight: 400;

          i {

            margin: 0 8px;
            border-left: 1px #939393 solid;
          }
        }

        .theme {
          display: flex;
          flex-wrap: wrap;

          span {
            margin-top: 13px;
            padding: 3px 16px;
            display: block;
            float: left;
            border-radius: 14px;
            background: #F9F6F3;
            margin-right: 6px;
            color: #A98F68;
            font-size: 15px;
            font-weight: 400;
          }
        }
      }

      button {
        height: 32px;
        background: #C3AB7C;
        width: 92px;
        line-height: 32px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        border: none;
        border-radius: 15px;
      }
    }

    .row2 {
      display: flex;
      flex-wrap: wrap;
      margin-top: 4px;

      .box {
        &:nth-child(3n+2) {
          margin-left: 16px;
          margin-right: 16px;
        }

        overflow: hidden;
        position: relative;
        margin-top: 16px;
        border-radius: 4px;
        width: 150px;
        height: 150px;
      }

      p {
        position: absolute;
        bottom: 0;
        left: 0;
        border-radius: 0px 4px 0px 4px;
        padding: 3px 6px;
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        background: #000000;
        opacity: 0.5;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
